<template>
  <div class="notshow_box">
    <div class="null" v-if="gg.resultSize === 0">什么都没有发布</div>
    <ul v-if="gg.resultSize > 0">
      <li
        v-for="items of gg.result"
        :key="items.id"
        :id="items.id"
      >
        <div>
          {{items.createTime | getDate}}
          <i>{{items.createTime | getDay}}</i>
        </div>
        <p
          @click="toX"
          class="text"
          :id="items.id"
        >
          {{items.title}}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { formatDate } from 'com/data'
import { mapState } from 'vuex'
export default {
  name: 'NoticNotshow',
  data () {
    return {
    }
  },
  methods: {
    toX () {
      var id = event.target.getAttribute('id')
      this.$router.push({
        path: '/home/shownotice',
        query: {
          noticId: id
        }
      })
    }
  },
  computed: {
    ...mapState({
      gg: 'gg'
    })
  },
  filters: {
    getDate: function (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM')
    },
    getDay: function (time) {
      var date = new Date(time)
      return formatDate(date, 'dd')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .notshow_box{
    position: relative
    top: -140px
    float: right
    width: 990px
    height: 630px
    .null{
      position: absolute
      width: 100%
      height: 100%
      z-index: 2
      text-align: center
      font-size: .7rem
      line-height: 500px
      color: rgb(180,180,180)
      background: rgb(255,255,255)
    }
    ul{
      width: 100%
      height: 100%
      list-style: none
      padding: 0
      margin: 0
      display: flex
      flex-direction: column
      li{
        width: 100%
        height: 70px
        div{
          cursor: default
          float: left
          text-align: center
          margin-top: 7px
          border-right: 1px solid rgb(210,210,210)
          width: 85px
          color: rgb(130,130,130)
          height: 80%
          i{
            width: 100%
            text-align: center
            display: inline-block
            margin-top: 10px
            font-size: .5rem
            color: rgb(15,153,213)
          }
        }
        p{
          margin: 0
          position: absolute
          display: block
          text-overflow: ellipsis
          overflow: hidden
          white-space: nowrap
          left: 118px
          content: " "
          display: table
          clear: both
          float: left
          width: auto
          cursor: pointer
          height: 20px
          line-height: 70px
        }
        .text:hover{
          color: rgb(15,100,213)
        }
      }
      li:nth-child(odd){
        background-color: rgb(255,255,255)
      }
    }
  }
</style>
